<!--
 * @Author: your name
 * @Date: 2021-08-16 09:21:10
 * @LastEditTime: 2021-08-16 20:24:45
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briup\3-html&css\day11\01-动画.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画</title>
    <style>
        .one,
        .two {
            width: 50px;
            height: 50px;
            border-radius: 50px;
            float: left;
            background-color: darkorange;
        }
        
        @keyframes move {
            from {
                margin-left: 100px;
                background-color: darkorchid;
            }
            to {
                margin-left: 10px;
                background-color: lightseagreen;
                width: 100px;
                height: 100px;
            }
        }
        
        .one {
            /* 动画：自己的默认状态 开始状态 结束状态----结束后回到默认状态 */
            animation-name: move;
            /* 动画时长  单位：s ms  */
            animation-duration: 4s;
            /* 动画次数 默认一次     属性infinite:无数次 */
            animation-iteration-count: 3;
            /* 动画延迟时长  整个动画开始之前的延迟 只会延迟一次，自己的默认状态 默认不延迟 */
            animation-delay: 2s;
            /*默认状态 从from - to   from-to.....*/
            /* animation-direction: normal; */
            /* 反转 to-from  t0-from.... */
            /* animation-direction: reverse; */
            /* 交替 from-to-from-to... */
            /* animation-direction: alternate; */
            /* 反转交替 to-from-to-from... */
            animation-direction: alternate-reverse;
            /* 暂停 */
            /* animation-play-state: paused; */
            /* 恢复 默认状态 */
            /* animation-play-state: running; */
            /* 填充模式 默认值none 延迟、动画结束后都是自己的状态 */
            animation-fill-mode: none;
            /* fowards保留动画变化最后一帧的状态 要与其他属性搭配使用 */
            /* animation-fill-mode: forwards; */
            /* 动画开始的状态  */
            /* animation-fill-mode: backwards; */
            /* 填充模式：延时使用的第一帧 动画结束的最后一帧 */
            animation-fill-mode: both;
            /* 动画时长的运动速度  ease-in(默认值 先快后慢)    ease-out(先慢后快)    ease-in-out(先快后慢再快)*/
            animation-timing-function: linear;
            /*匀速运动*/
        }
        
        .two {
            /* 速写 写两个是动画名称 动画时长 */
            /* animation: change 3s; */
            /* 如果出现两个时间 第一个时间是动画时长 第二个是延迟时间  其他位置不固定 随便写*/
            animation: change 3s 2s;
        }
        
        @keyframes change {
            0% {
                margin-top: 100px;
            }
            25% {
                magrin-top: 10px;
            }
            50% {
                margin-top: 70px;
                opacity: 0.3;
            }
            100% {
                margin-top: 10px;
            }
        }
        
        .three,
        .four,
        .five {
            width: 10px;
            height: 50px;
            background-color: limegreen;
            margin: 10px;
        }
        
        @keyframes jump {
            0% {
                width: 100px;
            }
            25% {
                width: 25px;
            }
            60% {
                width: 700px;
            }
            100% {
                width: 300px;
            }
        }
        
        .three {
            animation: jump 4s 2s backwards 3 reverse;
        }
        
        .four {
            animation: jump 2s forwards 4 alternate;
        }
        
        .five {
            animation: jump 3s both infinite alternate-reverse linear;
        }
        
        .six {
            background-color: mediumslateblue;
            overflow: hidden;
            width: 200px;
            height: 180px;
        }
        
        @keyframes walk {
            0% {
                margin-left: 0;
            }
            100% {
                margin-left: -1600px;
            }
        }
        
        .six>img {
            animation: walk 1s infinite steps(8) reverse;
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six">
        <img src="./west/wk.png" alt="">
    </div>
</body>

</html>